<template>
  <div class="contact-page">
    <div class="container">
      <!-- Page Header -->
      <div class="page-header">
        <h1>Contact Us</h1>
        <p>Get in touch with us for any inquiries</p>
      </div>

      <el-row :gutter="40">
        <!-- Contact Form -->
        <el-col :xs="24" :md="14">
          <div class="contact-form-section">
            <h2>Send us a Message</h2>
            <p class="form-description">Fill out the form below and we'll get back to you as soon as possible.</p>

            <el-form
              ref="formRef"
              :model="formData"
              :rules="rules"
              label-position="top"
              size="large"
              @submit.prevent="submitForm"
            >
              <el-form-item label="Your Name" prop="name">
                <el-input 
                  v-model="formData.name" 
                  placeholder="Enter your name"
                  :prefix-icon="PersonOutline"
                />
              </el-form-item>

              <el-row :gutter="20">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="Country" prop="country">
                    <el-input 
                      v-model="formData.country" 
                      placeholder="Your country"
                      :prefix-icon="LocationOutline"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="Email" prop="email">
                    <el-input 
                      v-model="formData.email" 
                      type="email"
                      placeholder="your@email.com"
                      :prefix-icon="MailOutline"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="Phone (Optional)" prop="phone">
                <el-input 
                  v-model="formData.phone" 
                  placeholder="+1234567890"
                  :prefix-icon="CallOutline"
                />
              </el-form-item>

              <el-form-item label="Message" prop="message">
                <el-input 
                  v-model="formData.message" 
                  type="textarea"
                  :rows="6"
                  placeholder="Tell us about your inquiry..."
                />
              </el-form-item>

              <el-form-item>
                <el-button 
                  type="primary" 
                  size="large" 
                  @click="submitForm" 
                  :loading="submitting"
                  style="width: 100%;"
                >
                  <n-icon size="20" style="margin-right: 0.5rem;"><SendOutline /></n-icon>
                  Send Message
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>

        <!-- Contact Info -->
        <el-col :xs="24" :md="10">
          <div class="contact-info-section">
            <h2>Contact Information</h2>
            
            <div class="contact-methods">
              <!-- WhatsApp -->
              <div v-if="appStore.storeInfo.whatsapp" class="contact-method">
                <div class="method-icon whatsapp">
                  <n-icon size="32"><LogoWhatsapp /></n-icon>
                </div>
                <div class="method-info">
                  <h3>WhatsApp</h3>
                  <p>{{ appStore.storeInfo.whatsapp }}</p>
                  <a 
                    :href="`https://wa.me/${appStore.storeInfo.whatsapp?.replace(/\s/g, '')}`"
                    target="_blank"
                    class="contact-link"
                  >
                    Chat on WhatsApp
                    <n-icon size="16"><ArrowForwardOutline /></n-icon>
                  </a>
                </div>
              </div>

              <!-- WeChat -->
              <div v-if="appStore.storeInfo.wechat" class="contact-method">
                <div class="method-icon wechat">
                  <n-icon size="32"><ChatbubbleEllipsesOutline /></n-icon>
                </div>
                <div class="method-info">
                  <h3>WeChat</h3>
                  <p>{{ appStore.storeInfo.wechat }}</p>
                  <button @click="showWeChatQR = true" class="contact-link">
                    View QR Code
                    <n-icon size="16"><QrCodeOutline /></n-icon>
                  </button>
                </div>
              </div>

              <!-- Email -->
              <div v-if="appStore.storeInfo.email" class="contact-method">
                <div class="method-icon email">
                  <n-icon size="32"><MailOutline /></n-icon>
                </div>
                <div class="method-info">
                  <h3>Email</h3>
                  <p>{{ appStore.storeInfo.email }}</p>
                  <a :href="`mailto:${appStore.storeInfo.email}`" class="contact-link">
                    Send Email
                    <n-icon size="16"><ArrowForwardOutline /></n-icon>
                  </a>
                </div>
              </div>

              <!-- Phone -->
              <div v-if="appStore.storeInfo.phone" class="contact-method">
                <div class="method-icon phone">
                  <n-icon size="32"><CallOutline /></n-icon>
                </div>
                <div class="method-info">
                  <h3>Phone</h3>
                  <p>{{ appStore.storeInfo.phone }}</p>
                  <a :href="`tel:${appStore.storeInfo.phone}`" class="contact-link">
                    Call Us
                    <n-icon size="16"><ArrowForwardOutline /></n-icon>
                  </a>
                </div>
              </div>

              <!-- Address -->
              <div v-if="appStore.storeInfo.address" class="contact-method">
                <div class="method-icon address">
                  <n-icon size="32"><LocationOutline /></n-icon>
                </div>
                <div class="method-info">
                  <h3>Address</h3>
                  <p>{{ appStore.storeInfo.address }}</p>
                </div>
              </div>

              <!-- Instagram -->
              <div v-if="appStore.storeInfo.instagram" class="contact-method">
                <div class="method-icon instagram">
                  <n-icon size="32"><LogoInstagram /></n-icon>
                </div>
                <div class="method-info">
                  <h3>Instagram</h3>
                  <p>{{ appStore.storeInfo.instagram }}</p>
                  <a 
                    :href="`https://instagram.com/${appStore.storeInfo.instagram?.replace('@', '')}`"
                    target="_blank"
                    class="contact-link"
                  >
                    Follow Us
                    <n-icon size="16"><ArrowForwardOutline /></n-icon>
                  </a>
                </div>
              </div>
            </div>

            <!-- Business Hours -->
            <div class="business-hours">
              <h3>Business Hours</h3>
              <ul>
                <li>
                  <span>Monday - Friday</span>
                  <span>9:00 AM - 6:00 PM</span>
                </li>
                <li>
                  <span>Saturday</span>
                  <span>9:00 AM - 5:00 PM</span>
                </li>
                <li>
                  <span>Sunday</span>
                  <span>Closed</span>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- WeChat QR Dialog -->
    <el-dialog v-model="showWeChatQR" title="Scan WeChat QR Code" width="90%" :max-width="400">
      <div class="wechat-qr-content">
        <img v-if="appStore.storeInfo.wechat_qr" :src="appStore.storeInfo.wechat_qr" alt="WeChat QR Code" />
        <div v-else class="qr-placeholder">
          <n-icon size="80" color="var(--color-gray)"><QrCodeOutline /></n-icon>
          <p>QR Code not available</p>
        </div>
        <p class="wechat-id">{{ appStore.storeInfo.wechat }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { NIcon } from 'naive-ui'
import {
  PersonOutline,
  LocationOutline,
  MailOutline,
  CallOutline,
  SendOutline,
  LogoWhatsapp,
  ChatbubbleEllipsesOutline,
  ArrowForwardOutline,
  QrCodeOutline,
  LogoInstagram
} from '@vicons/ionicons5'
import { ElMessage } from 'element-plus'
import { useAppStore } from '@/stores/app'
import { contactAPI } from '@/api'

const appStore = useAppStore()
const formRef = ref(null)
const submitting = ref(false)
const showWeChatQR = ref(false)

const formData = reactive({
  name: '',
  country: '',
  email: '',
  phone: '',
  message: ''
})

const rules = {
  name: [
    { required: true, message: 'Please enter your name', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: 'Please enter a valid email', trigger: 'blur' }
  ],
  message: [
    { required: true, message: 'Please enter your message', trigger: 'blur' },
    { min: 10, message: 'Message should be at least 10 characters', trigger: 'blur' }
  ]
}

const submitForm = async () => {
  try {
    await formRef.value.validate()
    
    submitting.value = true
    const response = await contactAPI.submit(formData)
    
    if (response.success) {
      ElMessage.success('Message sent successfully! We will get back to you soon.')
      formRef.value.resetFields()
    }
  } catch (error) {
    if (error.message) {
      ElMessage.error(error.response?.data?.message || 'Failed to send message')
    }
  } finally {
    submitting.value = false
  }
}
</script>

<style lang="scss" scoped>
.contact-page {
  padding: 2rem 0 4rem;
}

.page-header {
  text-align: center;
  margin-bottom: 4rem;
  
  h1 {
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
  }
  
  p {
    font-size: 1.25rem;
    color: var(--text-secondary);
  }
}

.contact-form-section {
  background-color: var(--color-white);
  padding: 2rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  
  h2 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
  }
  
  .form-description {
    color: var(--text-secondary);
    margin-bottom: 2rem;
  }
}

.contact-info-section {
  h2 {
    font-size: 1.75rem;
    margin-bottom: 2rem;
    color: var(--text-primary);
  }
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.contact-method {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  
  &:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

.method-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  
  &.whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
  }
  
  &.wechat {
    background: linear-gradient(135deg, #09B83E, #07A533);
  }
  
  &.email {
    background: linear-gradient(135deg, var(--color-info), #2980B9);
  }
  
  &.phone {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  }
  
  &.address {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  }
  
  &.instagram {
    background: linear-gradient(135deg, #E1306C, #C13584);
  }
}

.method-info {
  flex: 1;
  
  h3 {
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
  }
  
  p {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    word-break: break-all;
  }
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: var(--transition-fast);
  
  &:hover {
    color: var(--color-primary-dark);
    gap: 0.5rem;
  }
}

.business-hours {
  padding: 1.5rem;
  background-color: var(--color-gray-light);
  border-radius: var(--radius-lg);
  
  h3 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
  }
  
  ul {
    list-style: none;
    padding: 0;
    
    li {
      display: flex;
      justify-content: space-between;
      padding: 0.75rem 0;
      border-bottom: 1px solid var(--color-gray);
      
      &:last-child {
        border-bottom: none;
      }
      
      span:first-child {
        color: var(--text-primary);
        font-weight: 500;
      }
      
      span:last-child {
        color: var(--text-secondary);
      }
    }
  }
}

.wechat-qr-content {
  text-align: center;
  padding: 1rem;
  
  img {
    max-width: 300px;
    margin: 0 auto 1rem;
    border-radius: var(--radius-md);
  }
  
  .qr-placeholder {
    padding: 3rem;
    background-color: var(--color-gray-light);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    
    p {
      margin-top: 1rem;
      color: var(--text-secondary);
    }
  }
  
  .wechat-id {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }
  
  .contact-form-section {
    padding: 1.5rem;
    margin-bottom: 2rem;
  }
  
  .contact-info-section h2 {
    font-size: 1.5rem;
  }
}
</style>

